<template>
	<div class="page billedStoreConfig">
		<StoreChoice ref="StoreChoice" :current=[] :multipleChoice="false" :hasTotal="false" />
		<div class="scroll-view">
			<customHeader middleTitle="查看分账设置"/>
			<div class="page-body">
				<div class="current-store-content">
					<div class="name">
						<span class="left">当前门店：</span>
						<span v-if="shopInfo.shopName" class="right">{{shopInfo.shopName}}</span>
					</div>
					<div class="billing-ratio-info">
						<span class="top">分账比列</span>
						<span class="middle-left">{{shopInfo.totalRate}}</span>
						<span class="middle-right">%</span>
						<span class="bottom">当前门店分账比例=100%-各分账方分账比例之和</span>
					</div>
				</div>
				<div class="split-bill-list" v-if="splitBillList">
					<div class="section-title">
						<img src="../../../static/images/splitBilllist.png" />
						<span>共计{{splitBillList.length}}个分账方</span>
					</div>
					<ul>
						<li class="item"
						v-for="(item,index) in splitBillList"
						:key="index">
							<div class="left">
								<span class="index">第{{ index + 1 }}个分账方</span>
								<span class="name">{{item.accountName}}</span>
								<span class="blank">{{item.bankName + ' ' + item.accountNo}}</span>
								<span class="line"></span>
							</div>
							<div class="right">
								<span class="top">{{ item.separateRate }}%</span>
								<span class="bottom">分账比列</span>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="bottom-options">
				<span class="top-line"></span>
				<span class="close-split-bill-btn" @click="showCloseSplitBillBox">关闭分账功能</span>
				<span class="edit-split-bill-btn" @click="editSplitBill">修改分账信息</span>
			</div>

		</div>
	</div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import { Switch, MessageBox, Toast } from "mint-ui";
import StoreChoice from "../../components/StoreChoice/StoreChoice";
Vue.component(Switch.name, Switch);

Number.prototype.add = function (arg) {
  var r1, r2, m;
  try { r1 = this.toString().split(".")[1].length } catch (e) { r1 = 0 }
  try { r2 = arg.toString().split(".")[1].length } catch (e) { r2 = 0 }
  m = Math.pow(10, Math.max(r1, r2))
  return (this * m + arg * m) / m
}

Number.prototype.sub = function (arg) {
  return this.add(-arg);
}

export default {
  name: "billedStoreConfig",
  data() {
    return {
		shopInfo: JSON.parse(this.$route.query.shopInfo),
		splitBillList: []
    };
  },
  methods: {
	getShopSplitAccount() {
		var url = "/newapp/shopSplit/queryShopSplitAccount.do";
		this.ajax({
			url: url,
			type: "post",
			data : {supplierId : this.shopInfo.supplierId, shopId : this.shopInfo.shopId},
			controlLoading: false
		})
		.then((res) => {
			this.loading = false;
			this.noMore = false;
			if (res.success) {
				res.resultObject.forEach(el => {
          if (el.separateRate == null) {
            el.separateRate = 0;
          }
          el.originSeparateRate = el.separateRate;
        });
        this.splitBillList = res.resultObject;
			} else {
				this.splitBillList = [];
			}
			this.countTotalRate();
		})
		.catch((err) => {
    });
	},
	countTotalRate() {
		var tempTotalRate = 0;
		this.splitBillList.forEach(item=>{
			tempTotalRate += item.separateRate;
      item.originAccountNo = item.accountNo;
      if (item.accountNo.length > 7) {
        item.accountNo = item.accountNo.slice(0, 4) + '****' + item.accountNo.slice(item.accountNo.length-4, item.accountNo.length);
      }
		});
    this.shopInfo.totalRate = Number(100).sub(tempTotalRate);
	},
	showCloseSplitBillBox() {
		let _this = this;
		MessageBox.confirm('',{
			title:'',
			message:'<div style="text-align:center;color: #172735;font-size: 15px;font-weight: 400;line-height: 25px;margin: 20px;">关闭分账功能后，订单将不再分账如需分账可以重新进行分账设置</div>',
			confirmButtonText:'暂不关闭',
			cancelButtonText:'关闭分账'
		}).then(action => {

		}).catch(error =>{
			if(error == 'cancel'){
				_this.closeSplitBill()
			}
		});
	},
	closeSplitBill() {
		var url = "/newapp/shopSplit/isEnableShopSplitAccount.do";
		var params = {supplierId : this.shopInfo.supplierId, shopId : this.shopInfo.shopId, isEnable: '0'};
		this.ajax({
			url: url,
			type: 'post',
			data : params,
			controlLoading: false,
		}).then(function(res){
			if(res != null && res.success){
				Toast("关闭分账功能成功");
			}else{
				Toast("关闭分账功能失败，请稍后再试");
			}
		})
		.catch(function(err){
			Toast("关闭分账功能失败，请稍后再试");
		})
	},
	editSplitBill() {
		this.$router.push({path: "/splitBill/billedStoreConfig/config", query: {shopInfo: JSON.stringify(this.shopInfo), splitBillList: JSON.stringify(this.splitBillList)}});
	},
  },
  components: {
    customHeader,StoreChoice,
  },
  created:function(){
    this.getShopSplitAccount();
  },
  mounted() {

  }
};
</script>
<style>
.mint-msgbox {
    border-radius: 12px;
}
.mint-msgbox-btn {
	color: #727C8A !important;
  	font-size: 16px !important;
  	font-weight: 400 !important;
  	font-family: PingFangTC-Regular !important;
}
</style>
<style lang='scss' scoped>
@import "billedStoreConfig";
</style>
